body {
  --link-color-normal: #44476d;
  --link-color-visited: #623367;
  --onscreen: #7d1919;
  --background-1: #ffffff;
  --background-2: #eeeeee;
  --foreground: black;
  --foreground-2: #999999;

  background-color: var(--background-1);
  color: var(--foreground);
  caret-color: var(--foreground);
}

a:visited {
  color: var(--link-color-visited);
}
a {
  color: var(--link-color-normal);
}
a.onscreen.onscreen {
  color: var(--onscreen);
}

.dark {
  --link-color-normal: #8eaee9;
  --link-color-visited: #c265cc;
  --onscreen: #de7373;
  --background-1: #121212;
  --background-2: #333333;
  --foreground: white;
  --foreground-2: #666666;
}

#root {
  display: flex;
  font-family: sans-serif;
}

nav {
  padding: 20px;
  font-size: 22px;
}

.nav-inner {
  position: sticky;
  top: 10px;
  overflow-y: auto;
  max-height: 100vh;
}

nav ol {
  list-style: none;
  padding-inline-start: 10px;
  border-left: 1px solid var(--foreground-2);
}

nav li {
  margin-bottom: 7px;
  margin-top: 7px;
  font-size: 0.85em;
}

nav a {
  text-decoration: none;
}

main {
  padding: 20px;
}

main p {
  width: calc(min(50em, 90%));
  line-height: 1.3;
}

a.onscreen.onscreen {
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

.desmoscript-example {
  display: flex;
  width: calc(min(100% - 10px, 60em));
  height: 300px;
  margin-left: 20px;
}

.desmoscript-example .desmos-container {
  flex-grow: 1;
  height: 100%;
}

.desmoscript-example .cm-editor {
  height: 100%;
  min-width: 250px;
}

h1,
h2,
h3,
h4 {
  margin-top: 60px;
}

.dark code {
  background-color: var(--background-2);
  border-radius: 3px;
  padding: 2px;
}
